import {Line, mixins} from 'vue-chartjs' // We specify what type of chart we want from vue-chartjs and the mixins module
const { reactiveProp } = mixins

export default {
  extends: Line,
  mixins: [reactiveProp],
  type: 'line',
  data () {
    return {
      options: { //Chart.js options
        title: {
          display: true,
          text: "心电图信号"
        },
        scales: {
          yAxes: [
            {
              id: 'first-y-axis',
              ticks: {
                max: 300,
                min: -550,
                stepSize: 0.1,
              },
              gridLines: {
                display: true
              }
            }],
          xAxes: [
            {
              id: 'first-x-axis',
              type : 'time',
              time :{
                unit: 'second',
                unitStepSize: 0.02,
                displayFormats: {
                  second: 'YYYY-MMM D h:mm:ss',
                  day: 'll',
                  month: 'MMM YYYY'
                },
              },
              ticks: {
                display: false,
              },
              gridLines: {
                drawTicks: false,
                display: true
              },

            },
            {
              id: 'second-x-axis',
              type : 'time',
              time :{
                unit: 'second',
                unitStepSize: 1,
                displayFormats: {
                  millisecond: 'SSS [ms]',
                  second:	'h:mm:ss a'
                },
              },
              ticks: {
                display: true,
              },
              gridLines: {
                drawTicks: false,
                display: true
              },

            }
          ]
        },
        legend: {
          display: true
        },
        responsive: true,
        maintainAspectRatio: false
      }
    }
  },
  mounted () {
    // this.chartData is created in the mixin
    this.renderChart(this.chartData, this.options)
  }
}


